<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="app">
<!--v-momo=[name,age] 意思就是只有name或者是age被修改了才重新渲染模板-->
    <div v-memo="[name,age]">
        <h2>姓名:{{name}}</h2>
        <h2>年龄:{{age}}</h2>
        <h2>height:{{height}}</h2>
    </div>
</div>
<script src="../../JavaScript/vue.js"></script>
<script>
    /*
    v-memo指令:期望的绑定值类型any[]
    缓存一个模板的子树。在元素和组件上都可以使用。为了实现缓存，该指令需要传入一个固定长度的依赖值数组进行比较。如果数组里的每个值都与最后一次的渲染相同，那么整个子树的更新将被跳过
    */

        const app = Vue.createApp({
            data() {
                return {
                    name:"陶品奇",
                    age:22,
                    height:"176"
                }
            },
        })
        app.mount("#app")

</script>
</body>
</html>
